/* main tabs */
.tabMenu,
.menu {
	> ul {
		@include inlineList;
		
		> li {
			position: relative;
			
			&:not(:last-child) {
				margin-right: 20px;
			}
			
			&::before {
				border-top: 1px solid $wcfContentLink;
				bottom: 0;
				content: "";
				left: 50%;
				position: absolute;
				width: 0;
			}
			
			&.active{
				// this causes the item to stand above the fade-effect caused
				// by the overflow overlays
				z-index: 60;
				
				&::before {
					left: 0;
					transition: left .12s linear, width .12s linear;
					width: 100%;
				}
				
				> a {
					cursor: default;
				}
			}
			
			> a {
				display: block;
				padding: 5px 0;
			}
		}
	}
	
	@include screen-sm-down {
		padding-left: 15px;
		padding-right: 15px;
		position: relative;
		
		&::before {
			display: none;
		}
		
		> ul {
			flex-wrap: nowrap;
			overflow: auto;
			-webkit-overflow-scrolling: touch;
			
			> li {
				flex-shrink: 0;
				white-space: nowrap;
			}
			
			&.enableAnimation {
				transition: padding-left .24s linear;
				
				> li:first-child {
					transition: margin-left .24s linear;
				}
			}
		}
	}
	
	@include screen-md-up {
		> ul {
			border-bottom: 1px solid $wcfContentBorderInner;
			
			> li::before {
				bottom: -1px;
			}
		}
	}
}

.tabMenu {
	> ul > li > a {
		@include wcfFontSection;
	}
}

/* sub tabs */
.menu {
	margin-top: 10px;
	
	@include screen-md-up {
		> ul > li > a {
			@include wcfFontHeadline;
		}
	}
	
	& + .tabMenuContent {
		margin-top: 20px;
	}
}

.tabMenuOverlayLeft,
.tabMenuOverlayRight {
	align-items: center;
	bottom: 0;
	display: flex;
	height: 100%;
	opacity: 0;
	position: absolute;
	top: 0;
	transition: opacity .24s linear, visibility 0s linear .24s;
	visibility: hidden;
	width: 30px;
	z-index: 50;
	
	&.active {
		opacity: 1;
		transition-delay: 0s;
		visibility: visible;
	}
	
	&::before {
		color: $wcfContentDimmedText;
	}
}

.tabMenuOverlayLeft {
	background: linear-gradient(to left, transparentize($wcfContentBackground, 100%) 0%, $wcfContentBackground 50%);
	left: 0;
}

.tabMenuOverlayRight {
	background: linear-gradient(to right, transparentize($wcfContentBackground, 100%) 0%, $wcfContentBackground 50%);
	justify-content: flex-end;
	right: 0;
}

.tabMenuContent.hidden {
	display: none;
}

.tabMenuContent {
	// remove upper border if containerList is the first child
	> .containerList:first-child > li:first-child {
		border-top-width: 0;
	}
}
